<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs
        @change="
          (val) => {
            $router.push({ name: val })
          }
        "
        activeKey="shopWithdraw"
      >
        <a-tab-pane key="ShopList" tab="自提点"> </a-tab-pane>
        <a-tab-pane key="shopWithdraw" tab="提现"> </a-tab-pane>
        <a-tab-pane key="ShopVerifier" tab="核销员"> </a-tab-pane>
        <a-tab-pane key="ShopVerifySetting" tab="核销设置"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper" v-if="true">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-form-item style="margin: 0">
                <a-input placeholder="请输入核销卡名称" v-model="queryParam.search_key">
                  <a-icon slot="suffix" type="search" />
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons" style="margin: 0">
                <a-button style="margin-right: 8px" @click="resetQueryParams">重置</a-button>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="card_style_re">
      <div class="table-operator">
        <NoBorderRadio @onChange="onOptionChange" :options="options"></NoBorderRadio>
        <a-button type="primary" @click="onAdd" icon="plus" style="float: right">新建</a-button>
      </div>
      <a-divider />
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <div style="width: 150px" slot="user_id" slot-scope="user_id, item">
          <div style="width: 50px; float: left">
            <img :src="item.user_head_url" width="40px" />
          </div>
          <div style="width: 80px; float: left">
            {{ item.user_name }}
          </div>
        </div>
        <div slot="type" slot-scope="type, item">
          <div v-if="type == 0">
            <div>姓名：{{ item.name }}</div>
            <span>昵称：{{ item.mobile }}</span>
          </div>
          <div v-else-if="type == 1">
            <div>姓名：{{ item.name }}</div>
            <span>昵称：{{ item.mobile }}</span>
          </div>
          <div v-else-if="type == 2">
            <div>姓名：{{ item.name }}</div>
            <span>开户行: {{ item.bank_name }}</span>
            <span>银行卡号: {{ item.mobile }}</span>
          </div>
          <span v-else>余额提现</span>
        </div>
        <!-- <img
          :src="text"
          slot="cover_pic"
          width="100px"
          slot-scope="text"
        /> -->
        <div slot="status_text" slot-scope="status_text, item">
          <div v-if="item.status == 2 || item.status == 5">
            <div v-if="item.pay_type == 1">{{ item.status_text }} ({{ item.pay_type_text }})</div>
            <span v-else>
              {{ item.status_text }}
            </span>
          </div>
          <div v-else>
            {{ item.status_text }}
          </div>
        </div>
        <span slot="use_num" slot-scope="text">{{ text || 0 }}</span>
        <span slot="price" slot-scope="price">{{ price }}元</span>
        <span slot="action" slot-scope="text, record">
          <div v-if="record.status == 0">
            <a-popconfirm title="确认通过申请吗？" @confirm="handleDelete(record, 1)">
              <a-button type="link" size="small">通过</a-button>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm title="确认驳回申请吗？" @confirm="handleDelete(record, 3)">
              <a-button type="link" size="small">驳回</a-button>
            </a-popconfirm>
          </div>
          <div v-if="record.status == 1">
            <a-popconfirm title="确认驳回申请吗？" @confirm="handleDelete(record, 3)">
              <a-button type="link" size="small">驳回</a-button>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a-popconfirm title="确认打款?(微信自动打款)" @confirm="handleConfirm(record, 2)">
                    <a href="javascript:;">确认打款</a>
                  </a-popconfirm>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="手动打款吗？（线下打款）" @confirm="handleConfirm(record, 4)">
                    <a href="javascript:;">手动打款</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { shopCashList, shopCashEdit } from '@/api/shop'
import { applyConfirm } from '@/api/share'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '基本信息',
    dataIndex: 'user_id',
    scopedSlots: {
      customRender: 'user_id',
    },
  },
  {
    title: '账号信息',
    dataIndex: 'type',
    scopedSlots: {
      customRender: 'type',
    },
  },
  {
    title: '提现金额',
    dataIndex: 'price',
    scopedSlots: {
      customRender: 'price',
    },
  },
  {
    title: '状态',
    dataIndex: 'status_text',
    scopedSlots: {
      customRender: 'status_text',
    },
  },
  {
    title: '申请时间',
    dataIndex: 'created_at',
  },
  {
    title: '操作',
    width: '150px',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  name: 'ArticleList',
  components: {
    STable,
    NoBorderRadio,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '未审核',
          value: 0,
        },
        {
          title: '待打款',
          value: 1,
        },
        {
          title: '已打款',
          value: 2,
        },
        {
          title: '无效',
          value: 3,
        },
      ],
      isNew: false,
      visible: false,
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      modalLoading: false,
      type_list: [],
      form_pic_url: '',
      // 查询条件参数
      queryParam: {
        search_key: null,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return shopCashList(parameter)
          .then((res) => {
            console.log('shopList', res)
            this.type_list = res.data.type_list
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
    }
  },
  created() {},
  methods: {
    onOptionChange(val) {
      this.queryParam.status = val
      this.$refs.table.refresh()
    },
    handleDelete: function (record, action) {
      const hide = this.$message.loading('请求中...', 0)
      shopCashEdit({
        id: record.id,
        status: action,
      })
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('操作成功！')
            this.$refs.table.refresh()
          } else {
            this.$error({
              content: res.msg,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.modalLoading = false
        })
    },
    handleConfirm: function (record, action) {
      const hide = this.$message.loading('请求中...', 0)
      applyConfirm({
        id: record.id,
        status: action,
      })
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('操作成功！')
            this.$refs.table.refresh()
          } else {
            this.$error({
              content: res.msg,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.modalLoading = false
        })
    },
    resetQueryParams() {
      Object.assign(this.queryParam, {
        search_key: null,
      })
      this.$refs.table.refresh(true)
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
